<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            height: 50px;
            width: auto;
            background-color: rgb(241, 180, 66);
            color: #fff;
            font-size: 25px;
            text-align: center;
            line-height: 50px;
            position: relative;
        }

        #left {
            position: absolute;
            left: 10px;
            font-size: 25px;
            line-height: 50px;
            color: #fff;
        }

        input {
            border: none;
            height: 50px;
            font-size: 25px;
            width: 100vw;
            padding-left: 30px;
            margin-bottom: 20px;
        }

        footer {
            position: relative;
            height: 100px;
        }

        a {
            text-decoration: none;
        }

        #sure {
            color: black;
            position: absolute;
            font-size: 15px;
            left: 50%;
            top: 50%;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0px 3px 7px 2px #ccc;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>

    <header>
        <a id="left" href="../index.html">&lt;</a>
        详情页
    </header>
    <main>
        <input type="text" placeholder="标题" id="title">
        <br />
        <input type="text" placeholder="内容" id="content">
    </main>
    <footer>
        <a href="./content.html" id="sure">确定</a>
    </footer>
    <script>
        let sure = document.getElementById('sure')
        let id;
        sure.onclick = function () {
            title = document.getElementById('title').value
            content = document.getElementById('content').value
            if (localStorage.length < 1) {
                id = localStorage.length
            } else {
                console.log(localStorage.getItem(localStorage.length));
                id = localStorage.key(localStorage.length - 1) + 1
            }

            let obj = [`${title},${content}`]
            localStorage.setItem(id, obj)
        }
        console.log(localStorage.key(localStorage.length - 1));
    </script>
</body>

</html>